<template>
    <div>
      <ul class="y_ul">
        <li v-for="(item,index) in yongData" :key="index">
          <div class="y_left">
            <img :src="item.avatar" alt="">
          </div>
          <div class="y_right">
            <p>{{item.user_login}}</p>
            <p>{{item.content}}</p>
            <p class="ping_p" v-for="(item2,index2) in item.to_comments" :key="index2">
              <span>{{item2.user_login}} :</span>
              <span>{{item2.content}}</span>
            </p>
            <div class="y_foot">
              <span>{{item.createtime}}</span>
              <div class="y_rig">
                <img @click="pingL2(item)" src="../../../assets/img/ping.png" alt="">
                <img @click="like3(item)" :src="item.status==1?'./static/lyl/like.png':'./static/lyl/like2.png'" alt="">
                <span>{{item.like_num}}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>

      <!--评论输入框-->
      <div v-if="piShow" class="input">
        <input :autofocus="autofocus" type="text" v-model="p_cont" placeholder="说点什么吧...">
        <span @click="sendL()">发送</span>
      </div>

      <transition name="van-slide-right">
        <div v-show="visible" class="tran_right">{{Fade}}</div>
      </transition>
    </div>
</template>

<script>
  import * as list from "../../../api/list.js";
  import * as search from "../../../api/search.js"
    export default {
      name: "Recommend",
      data(){
        return {
          autofocus:true,
          p_cont:'',
          piShow:true,
          Fade:'',
          visible:false,
          yongData:[],
          OneSend:true,//标记是不是二级评论
          to_uid:'',
          parentid:''
        }
      },
      beforeMount(){
        //评论列表
        let parms = {type:2,post_id:this.$route.params.id2,user_id:this.$store.state.user_id};
        search.commentList(parms).then(res=>{
          console.log('评论列表',res)
          this.yongData = res.comments
        })
      },
      mounted(){
        mui.back = function() {
          window.history.go(-1);
        }
      },
      methods:{
        // playVideo(item){
        //   this.$router.push('/video2/'+item.id+'/'+this.$route.params.id2)
        // }
        pingL2(item){
          this.autofocus = true;
          this.OneSend = false;
          this.to_uid = item.uid;
          this.parentid = item.id
        },
        like3(itl){
          if (itl.status==1){
            itl.status=0;
            let parms = {
              id:itl.id,
              user_id:this.$store.state.user_id,
              status:itl.status
            };
            search.commentLike(parms).then(res=>{
              console.log(res);
              itl.like_num -=1;
              this.like_num -=1;
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            })
          } else{
            itl.status=1;
            let parms = {
              id:itl.id,
              user_id:this.$store.state.user_id,
              status:itl.status
            };
            search.commentLike(parms).then(res=>{
              console.log(res);
              itl.like_num = Number(itl.like_num) + 1;
              this.like_num = Number(this.like_num) + 1;
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            })
          }
        },
        sendL(){
          if (this.OneSend) {
            let params = {type:2,post_id:this.$route.params.id2,uid:this.$store.state.user_id,content:this.p_cont};
            search.comment(params).then(res=>{
              console.log('评论',res);
              this.p_cont = '';
              //评论列表
              let parms = {type:2,post_id:this.$route.params.id2,user_id:this.$store.state.user_id};
              search.commentList(parms).then(res=>{
                console.log('评论列表',res)
                this.yongData = res.comments
              })
            })
          }else{
            let params = {type:2,post_id:this.$route.params.id2,uid:this.$store.state.user_id,content:this.p_cont,to_uid:this.to_uid,parentid:this.parentid};
            search.comment(params).then(res=>{
              console.log('二级评论',res);
              this.OneSend = true;
              this.p_cont = '';
              //评论列表
              let parms = {type:2,post_id:this.$route.params.id2,user_id:this.$store.state.user_id};
              search.commentList(parms).then(res=>{
                console.log('评论列表',res)
                this.yongData = res.comments
              })
            })
          }

        }
      }
    }
</script>

<style scoped>
  .y_ul li{
    border-bottom: 2px solid #b3b2b2;
    padding: 40px 40px 30px;
    display: flex;
  }
  .y_ul li .y_left img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 30px;
  }
  .y_ul li .y_right{
    flex-grow: 1;
  }
  .y_ul li .y_right p:nth-child(1){
    font-size: 24px;
    color: #717070;
    padding-bottom: 20px;
  }
  .y_ul li .y_right p:nth-child(2){
    font-size: 18px;
    line-height: 30px;
    color: #717070;
    padding-bottom: 20px;
  }
  .y_ul li .y_right .ping_p{
    padding: 20px;
    background: #dcdcdc;
  }
  .y_ul li .y_right .ping_p span{
    font-size: 18px;
  }
  .y_ul li .y_right .ping_p span:nth-child(1){
    color: #884ca4;
  }
  .y_ul li .y_right .y_foot{
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
  }
  .y_ul li .y_right .y_foot span{
    font-size: 18px;
    color: #9c9a9a;
  }
  .y_ul li .y_right .y_foot .y_rig img{
    width: 35px;
    height: 35px;
  }
  .y_ul li .y_right .y_foot .y_rig img:nth-child(1){
    margin-right: 40px;
  }
  .input{
    background: #efefef;
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
  }
  .input input{
    flex-grow: 1;
    border-radius: 10px;
    padding: 15px;
    font-size: 30px;
    caret-color:#48c261;
  }
  .input span{
    align-self: center;
    margin-left: 40px;
    border-radius: 10px;
    width: 90px;
    height: 60px;
    background: #48c261;
    color: #fff;
    line-height: 60px;
    text-align: center;
    font-size: 30px;
  }
  .tran_right{
    width: 220px;
    height: 60px;
    border-radius: 10px;
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    top: 50%;
    left: 50%;
    position: fixed;
    background: rgba(0,0,0,0.6);
    color: #fff;
  }
</style>
